<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<style>
    /*干掉file样式*/
    #btn_import input {
        position: absolute;
        font-size: 100px;
        right: 0;
        top: 0;
        opacity: 0;
        width: 83px;
        height: 34px;
    }
</style>
<body class="hold-transition skin-blue sidebar-mini">
<!--采购进度编辑-->
<div class="modal fade" id="modal-edit">
    <div class="modal-dialog" style="width:1200px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">采购进度编辑</h4>
            </div>
            <div class="modal-body">
                <form id="editForm" class="form-horizontal">
                    <input type="hidden" name="sppId">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="col-sm-4 control-label">审批状态</label>
                                <div class="col-sm-8">
                                    <select class="form-control" name="sppStatus" title="">
                                        <option value="">请选择</option>
                                        <option value="4">待OA审批</option>
                                        <option value="5">审批通过</option>
                                        <option value="6">审批未通过</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="col-sm-4 control-label">审批日期</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control datepicker" name="sppVerifyDate">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">跟踪号</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="sppTrackCode">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">预计回货</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control datepicker" name="sppPredictDate">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="col-sm-4 control-label">招标开始</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control datepicker" name="sppTenderStartDate">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="col-sm-4 control-label">招标结束</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control datepicker" name="sppTenderEndDate">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="col-sm-4 control-label">报价开始</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control datepicker" name="sppQuoteStartDate">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="col-sm-4 control-label">报价结束</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control datepicker" name="sppQuoteEndDate">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="col-sm-4 control-label">合同开始</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control datepicker" name="sppContractStartDate">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="col-sm-4 control-label">合同结束</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control datepicker" name="sppContractEndDate">

                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">说明</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="sppProgress">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="col-sm-4 control-label">行号</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="sppRowNo">
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info" id="btn-edit">提交</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<section class="content-header"><h1>采购进度编辑</h1></section>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <form id="queryForm" onsubmit="return false;">
                        <div class="row">
                            <div class="form-inline">
                                <div class="form-group">
                                    <label>项目编号</label>
                                    <!--<input type="text" name="sppProjectCode" class="form-control" placeholder="请输入项目编号">-->
                                    <input type="hidden" style="display: none" name="sppProjectCodeArrayStr"/>
                                    <div class="form-control" name="sppProjectCodeArraySelect"
                                         style="OVERFLOW-Y: auto; OVERFLOW-X:hidden;width: 196px!important; display: inline-block; height:34px!important;-webkit-border-radius: 0 !important;-moz-border-radius: 0 !important;border-radius: 0 !important;width: 196px!important;">
                                    </div>
                                    <lable>
                                        <button type="button"
                                                class="btn-success btn-xs"
                                                style="
                                                font-weight: 900;
                                                border-radius: 5px"
                                                name="addSppProjectCodeArraySelect"><i
                                                class="glyphicon glyphicon-plus"></i></button>
                                        <button type="button"
                                                class="btn-danger btn-xs"
                                                style="font-weight: 900;border-radius: 5px"
                                                name="subtractSppProjectCodeArraySelect"><i
                                                class="glyphicon glyphicon-minus"></i></button>
                                    </lable>
                                </div>
                                <div class="form-group">
                                    <label>项目名称</label>
                                    <input type="text" name="sppProjectName" class="form-control" placeholder="请输入项目名称">
                                </div>
                                <div class="form-group">
                                    <label>SAP物料编码</label>
                                    <input type="text" name="sppSapCode" class="form-control" placeholder="请输入SAP物料编码">
                                </div>
                                <div class="form-group">
                                    <label>物料描述</label>
                                    <input type="text" name="sppMatDesc" class="form-control" placeholder="请输入物料描述">
                                </div>
                                <div class="form-group">
                                    <label>跟踪号</label>
                                    <input type="text" name="sppTrackCode" class="form-control" placeholder="请输入跟踪号">
                                </div>
                                <div class="form-group">
                                    <label>业务员</label>
                                    <input type="text" name="sppBuyer" class="form-control" placeholder="请输入业务员">
                                </div>
                                <div class="form-group">
                                    <label>计划员</label>
                                    <input type="text" name="sppPlanner" class="form-control" placeholder="请输入计划员">
                                </div>
                                <div class="form-group">
                                    <label>行号</label>
                                    <input type="text" name="sppRowNo" class="form-control" placeholder="请输入行号"
                                           maxlength="128">
                                </div>
                                <div class="form-group">
                                    <label>采购进度</label>
                                    <select name="sppStatus" class="form-control">
                                        <option value="">全部</option>
                                        <option value="4" selected="selected">审核中</option>
                                        <option value="5">审批通过</option>
                                        <option value="6">审批不通过</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>提报日期</label>
                                    <input type="text" class="form-control datepicker" name="startTime"
                                           readonly="readonly"/>
                                    <span> 至 </span>
                                    <input type="text" class="form-control datepicker" name="endTime"
                                           readonly="readonly"/>
                                </div>
                                <button type="button" class="btn btn-success" id="btn-search">
                                    <span class="Bold">搜索</span>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="row" id="toolbar">
                    <div class="row">
                        <div class="form-inline">
                            <div class="form-group">
                                <button type="button" class="btn btn-primary" id="btn-export">
                                    导出采购进度编辑列表
                                </button>
                            </div>
                            <div class="form-group">
                                <form id="import">
                                    <a href="javascript:;" class="btn btn-info" id="btn_import">导入行号
                                        <input
                                                type="file" name="file" id="importFile"
                                                accept=".csv,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"/>
                                    </a>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box-body">
                    <table id="bootstrap-table"></table>
                </div>
            </div>
        </div>
    </div>
</section>
<div th:include="include :: footer"></div>
<script th:inline="javascript">

    var table, progressName = ['', '', '', '', '审核中', '审核通过', '审核不通过'];
    var colors = ['', '', '', '', "label-warning", "label-success", "label-danger"];
    var divID = "showExcelDatePanel";
    /**单删项目编号*/
    function deleteSppProjectCodeArraySelect(obj) {
        var selectArr = $("#queryForm [name='sppProjectCodeArrayStr']").val().split(',');
        delete selectArr[$(obj).parent().attr("data-index")];
        var selectVal = selectArr.join(',');
        if (selectVal[selectVal.length - 1] == ',') {
            selectVal = selectVal.substring(0, selectVal.length - 1);
        }
        if (selectVal[0] == ',') {
            selectVal = selectVal.substring(1, selectVal.length);
        }
        if (selectVal.length == 0) {
            $("#queryForm [name='sppProjectCodeArraySelect']").css("width", "196px");
        }
        $("#queryForm [name='sppProjectCodeArrayStr']").val(selectVal);
        $(obj).parent().remove();
        if ($("#queryForm [name='sppProjectCodeArraySelect']").width() < 196) {
            $("#queryForm [name='sppProjectCodeArraySelect']").css("width", "196px");
        }
    }
    /** 编辑模态框 */
    function edit(row) {
        if(sessionUser.name==row.sppPlanner || sessionUser.name=='管理员'){
            $("#editForm").fillData(row);
            js.modal.open("modal-edit");
        }else {
            js.modal.warning("尊敬的用户，您无权修改他人计划！");
        }

    }

    $(function () {
        $("title").html($("title").html()+" —— 采购进度编辑");
        /**添加项目编号*/
        $("#queryForm [name='addSppProjectCodeArraySelect']").click(function () {
            js.modal.prompt("请输入要搜索的项目编号", function (result) {
                if (result != null && result != "") {
                    $("#queryForm [name='sppProjectCodeArraySelect']").css("width", "auto");
                    var idVal = $("#queryForm [name='sppProjectCodeArraySelect']").children("span").length;
                    var optionHtml = '<span data-index="' + idVal + '" data="' + result + '" style="font-size: 16px; margin: 5px;border: #8B8986 1px solid;border-radius: 5px;background-color: #e9e9e9;color: #333333;padding-left: 5px;padding-right: 5px" value="' + result + '">' + result + '' +
                        '<button onclick="deleteSppProjectCodeArraySelect(this)" onmouseover="this.style.color=\'white\';" onmouseout="this.style.color=\'#333333\';" type="button" style="outline: none;border: 0;background: transparent" name="btn_close">×</button></span>';
                    $("#queryForm [name='sppProjectCodeArraySelect']").append(optionHtml);
                    if ($("#queryForm [name='sppProjectCodeArraySelect']").width() < 196) {
                        $("#queryForm [name='sppProjectCodeArraySelect']").css("width", "196px");
                    }
                    var vals = "";
                    $("#queryForm [name='sppProjectCodeArraySelect']").children("span").each(function () {
                        vals += $(this).attr("data") + ",";
                    });
                    vals = vals.substring(0, vals.length - 1);
                    $("#queryForm [name='sppProjectCodeArrayStr']").val(vals);
                }
            })
        });

        /** 清空项目编号 */
        $("#queryForm [name='subtractSppProjectCodeArraySelect']").click(function () {
            $("#queryForm [name='sppProjectCodeSelect']").css("width", "196px");
            $("#queryForm [name='sppProjectCodeArraySelect']").empty();
            $("#queryForm [name='sppProjectCodeArrayStr']").val('');
        });
        /** 默认计划员只能看到自己的计划 */
        // $("#queryForm [name='sppPlanner']").val(sessionUser.name);
        /** 加载用户表格 */
        table = js.table.init({
            url: ctx + "buy/editBuyProgress/list",
            paginationVAlign: 'both',
            showColumns: true,
            showExport: false,
            columns: [
                {
                    title: '序号', field: 'id', width: '50px',
                    formatter: function (value, row, index, field) {
                        return index + 1;
                    }
                },
                {
                    title: "OA审批进度", field: 'sppStatus',
                    formatter: function (value, row, index, field) {
                        if (value) {
                            return '<span class="badge ' + colors[value] + '">' + progressName[value] + '</span> ';
                        }
                    }
                },
                {title: "行号", field: 'sppRowNo'},
                {title: "跟踪号", field: 'sppTrackCode'},
                {title: "SAP<br>物料编码", field: 'sppSapCode'},
                {title: "物料描述", field: 'sppMatDesc'},

                {title: "数量", field: 'sppNum'},
                // {title: "单位", field: 'sppUnit'},
                {title: "项目号", field: 'sppProjectCode'},
                {title: "备注<br>计划用途", field: 'sppProjectName'},
                // { title: "项目信息", field: 'sppProjectName'},
                // { title: "品牌", field: 'sppBrand'},
                // { title: "供应商", field: 'sppSupplier'},
                {title: "计划员", field: 'sppPlanner'},
                // {title: "请购人", field: 'sppDesigner'},
                {title: "业务员", field: 'sppBuyer'},

                {title: "提报日期", field: 'sppCreateTime'},
                {title: "审批日期", field: 'sppVerifyDate'},
                {title: "预计<br>回货日期", field: 'sppPredictDate'},
                {title: "进度说明", field: 'sppProgress'},
                {
                    title: "操作",
                    width: '60px',
                    formatter: function (value, row, index) {
                        var actions = [];
                        if (hasP("buy:buyprogress:edit")) {
                            actions.push('<a class="btn btn-warning btn-xs" href="javascript:void(0)" onclick="edit(' + js.jsonStringify(row) + ')"> 编辑</a> ');
                        }
                        // if (sessionUser.name == row.sppPlanner) {
                        //     if (hasP("buy:buyprogress:edit")) {
                        //         actions.push('<a class="btn btn-warning btn-xs" href="javascript:void(0)" onclick="edit(' + js.jsonStringify(row) + ')"> 编辑</a> ');
                        //     }
                        // }
                        return actions.join('');
                    }
                }
            ]
        });

        /**
         * 表格搜索
         */
        $("#btn-search").click(function () {
            js.table.search(table);
        });

        /** 编辑进度 */
        $("#btn-edit").click(function () {
            js.submit({
                url: ctx + "buy/editBuyProgress/edit",
                data: new FormData($("#editForm")[0]),
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        js.modal.success(result.msg);
                        js.table.refresh(table);
                        js.modal.hide("modal-edit");
                    } else {
                        js.modal.warning(result.msg);
                    }
                }
            });

        });

        /**
         * 模态框隐藏事件， 重置表单，重置验证
         */
        js.modal.hideEvent("modal-edit-user", function () {
            js.reset("editForm");
        });

        /**
         * 根据搜索条件导出列表excel
         */
        $("#btn-export").on('click', function () {
            $("#queryForm").removeAttr("onsubmit");
            $("#queryForm").attr("action", "/buy/editBuyProgress/export");
            $("#queryForm").submit();
            $("#queryForm").removeAttr("action");
            $("#queryForm").attr("onsubmit", "return false;");
        })

        $("#importFile").change(function (e) {
            js.modal.confirm("尊敬的用户，您确认要导入此文件吗?", function () {
                js.post({
                    formId: "import",
                    url: ctx + "buy/editBuyProgress/import",
                    data: new FormData($("#import")[0]),
                    processData: false,
                    contentType: false,
                    success: function (result) {
                        if (result.type === web_status.SUCCESS) {
                            js.modal.success(result.msg);
                            js.table.refresh(table);
                        } else {
                            var restMsg="";
                            for (var i = 0; i < result.data.length; i++) {
                                restMsg+="第"+result.data[i].errorModel.rowIndex+"行第"+result.data[i].errorModel.colIndex+"列" + result.data[i].errorModel.errorInfo + "," + result.data[i].errorModel.correctInfo+"<br>";
                            }
                            js.modal.warning(restMsg);
                            // try {
                            //     new Uint8Array([1, 2]).slice(0, 2);
                            // } catch (e) {
                            //     console.log("[Uint8Array" + e.description + "]这里使用【Array.slice】。");
                            //     //IE或有些浏览器不支持Uint8Array.slice()方法。改成使用Array.slice()方法
                            //     Uint8Array.prototype.slice = Array.prototype.slice;
                            // }
                            // var obj = $("#importFile");
                            // var url = $(obj).val();
                            // if (!url) {
                            //     return;
                            // }
                            // var suffix = url.substring(url.lastIndexOf(".") + 1, url.length);
                            // if (!(suffix == "xls" || suffix == "xlsx")) {
                            //     return alert("文件类型不正确");
                            // }
                            // var files = e.target.files;
                            // var fileReader = new FileReader();
                            // fileReader.readAsArrayBuffer(files[0]);// 以二进制方式打开文件
                            // fileReader.onload = function (ev) {
                            //     $(obj).val('');
                            //     var date = new Date();
                            //     // divID = "showExcelDatePanel" + date.getSeconds();
                            //     if ($("#" + divID) != undefined) {
                            //         $("#" + divID).remove();
                            //     }
                            //     $('body').append('<div class="modal fade" id="' + divID + '" style="width: 1300px">' +
                            //         '    <div class="modal-dialog">' +
                            //         '        <div class="modal-content">' +
                            //         '            <div class="modal-header">' +
                            //         '                <button type="button" class="close" data-dismiss="modal" aria-label="Close">' +
                            //         '                    <span aria-hidden="true">&times;</span></button>' +
                            //         '                <h4 class="modal-title">上传Excel文件查看</h4>' +
                            //         '            </div>' +
                            //         '            <div class="modal-body"><table id="excelDataTable"></table></div>' +
                            //         '            <div class="modal-footer">' +
                            //         '                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>' +
                            //         '            </div>' +
                            //         '        </div>' +
                            //         '    </div>' +
                            //         '</div>');
                            //     try {
                            //         var data = ev.target.result;
                            //         var workbook = XLSX.read(data, {type: 'array'}),
                            //             persons = [];
                            //     } catch (e) {
                            //         console.error(e);
                            //         return alert('文件类型不正确!');
                            //     }
                            //
                            //     //遍历每张表读取
                            //     for (var sheet in workbook.Sheets) {
                            //         if (workbook.Sheets.hasOwnProperty(sheet)) {
                            //             persons = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet], {
                            //                 raw: true,
                            //                 header: 1
                            //             }));
                            //             // console.log(JSON.stringify(persons));
                            //             for (var i = 0; i < persons.length; i++) {
                            //                 var infoArr = new Array();
                            //                 for (var j = 0; j < result.data.length; j++) {
                            //                     if (result.data[j].errorModel.rowIndex == i) {
                            //                         infoArr.push("<br>" + result.data[j].errorModel.errorInfo + "<br>" + result.data[j].errorModel.correctInfo);
                            //                     }
                            //                 }
                            //                 var person = persons[i];
                            //                 var tr = '<tr id="tr-' + i + '">';
                            //                 for (var j = 0; j < person.length + 1; j++) {
                            //                     if(j==person.length + 1){
                            //                         tr += '<td>' + infoArr.join('') + '</td>';
                            //                     }else{
                            //                         tr += '<td>' + $.trim(person[j] ? person[j] : "") + '</td>';
                            //                     }
                            //                 }
                            //                 for (var k = 0; k < (6 - person.length); k++) {
                            //                     tr += '<td></td>';
                            //                 }
                            //                 tr += "</tr>";
                            //                 $("#excelDataTable").append(tr);
                            //             }
                            //             break;// 如果只取第一张表，就把beak注释取消
                            //         }
                            //     }
                            //     $("#" + divID).modal('show');
                            // };
                        }
                    }
                });
            })
        });


    });


    function sleep(numberMillis) {
        var now = new Date();
        var exitTime = now.getTime() + numberMillis;
        while (true) {
            now = new Date();
            if (now.getTime() > exitTime)
                return;
        }
    }
</script>
</body>
</html>
